<template>
  <div class="news-container">
    <div class="news-wrapper">
      <Nav :list="categoryList" @select="selectCategory" />
      <div class="main">
        <div class="title">
          <img src="@/assets/icons/news-title-icon.webp" alt="" />
          <span>推荐资讯</span>
        </div>
        <div class="banner" v-if="bannerList.length > 0">
          <div class="banner-img">
            <img :src="bannerList[bannerIndex]?.coverPicture" alt="" />
            <p class="title">{{ bannerList[bannerIndex]?.title }}</p>
          </div>
          <div class="banner-list">
            <div
              class="banner-item"
              v-for="(item, index) in bannerList"
              :key="item.id"
              :class="{ active: index === bannerIndex }"
              @click="bannerIndex = index"
            >
              <img :src="item.coverPicture" alt="" />
            </div>
          </div>
        </div>
        <div class="list">
          <div class="list-wrapper">
            <div class="list-item" v-for="item in newsList" :key="item.id">
              <Item :item="item" />
            </div>
          </div>

          <div class="load-more">
            <span>加载更多</span>
          </div>
        </div>
      </div>
    </div>
    <Footer />
  </div>
</template>
<script setup>
import Nav from './nav.vue'
import Item from './item.vue'
import Footer from '@/components/footer.vue'
import { getNewsCategoryAPI, getNewsListAPI } from '@/api/news'
import { ref, onMounted } from 'vue'
const newsList = ref([])
const categoryList = ref([])
const activeIndex = ref(0)
const bannerIndex = ref(0)
const bannerList = ref([])
const getCategoryList = async () => {
  const res = await getNewsCategoryAPI()
  console.log(res)
  if (res.code === 200) {
    categoryList.value = res.data
  }
}
const goDetail = (id) => {
  console.log(id)
  router.push(`/news_detail/${id}`)
}

const getNewsList = async () => {
  const res = await getNewsListAPI({
    page: 1,
    size: 20,
    categoryId: categoryList.value[activeIndex.value]?.id
  })
  console.log(res)
  if (res.code === 200) {
    newsList.value = res.data.list
    bannerList.value = res.data.list.slice(0, 7)
  }
}

const selectCategory = (index) => {
  console.log(index)
  activeIndex.value = index
}

onMounted(() => {
  getCategoryList()
  getNewsList()
})
</script>
<style lang="scss" scoped>
.news-container {
  width: 100%;
  min-height: 100vh;
  background: #f5f7ff;
  padding-top: 10px;
  .main {
    width: 1200px;
    margin: 0 auto;
    padding-bottom: 100px;
    .title {
      display: flex;
      align-items: center;
      gap: 10px;
      padding-top: 20px;
      font-size: 24px;
      font-weight: 700;
      display: flex;
      height: 28px;
      margin-bottom: 16px;
      align-items: center;
      img {
        width: 32px;
      }
    }
    .banner {
      width: 1200px;
      height: 500px;
      background: #ffffff;
      border-radius: 12px 12px 12px 12px;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      margin-top: 30px;
      padding: 10px;
      .banner-img {
        width: 100%;
        height: 369px;
        border-radius: 8px 8px 8px 8px;
        // object-fit: cover;
        overflow: hidden;
        position: relative;
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
        .title {
          position: absolute;
          bottom: 0;
          // left: 0;
          // width: 100%;
          // height: 100%;
          // background: rgba(0, 0, 0, 0.5);
          color: #fff;
          font-size: 20px;
          font-weight: 700;
          padding: 20px;
        }
      }
      .banner-list {
        height: 115px;
        display: flex;
        align-items: center;
        justify-content: center;
        // padding: 0 10px;
        width: 100%;
        .banner-item {
          width: 110px;
          height: 72px;
          border-radius: 10px;
          overflow: hidden;
          border: 2px solid transparent;
          margin-right: 10px;
          cursor: pointer;
          padding: 1px;
          overflow: hidden;
          &.active {
            border: 2px solid #16b13a;
          }
          img {
            border-radius: 6px;
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }
      }
    }
    .list {
      //   padding-top: 10px;
      margin-top: 10px;
      border-radius: 10px;

      overflow: hidden;
      background: #fff;
      padding: 16px 0;
      .list-wrapper {
        min-height: 50vh;
      }
      .list-item {
        margin-bottom: 16px;
        padding: 0 16px;
      }
      .load-more {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 16px;
        cursor: pointer;
        span {
          color: #999;
        }
      }
    }
  }
}
</style>
